// 引入最大的组件vue
import Vue from 'vue'
// 1.引入路由
import Router from 'vue-router'
// 2.引入需要路由配置的页面（推荐页。歌手页。排行页。搜索页）
// import Recommend from '../components/recommend/recommend'
// import Singer from '../components/singer/singer'
// import Rank from '../components/rank/rank'
// import Search from '../components/search/search'
// // 子路由配置页面（歌手详情页）
// import SingerDetail from '../components/singer-detail/singer-detail'
// // 配置推荐页面的二级路由
// import Disc from '../components/disc/disc'
// // 配置排行榜页面的二级路由
// import TopList from '../components/top-list/top-list'
// // 个人中心
// import UserCenter from '../components/user-center/user-center'

// 3、路由挂载
Vue.use(Router)

// 异步加载路由组件 和直接引入路由配置页面一个意思，只是需要哪个
// 路由就加载哪个路由，也就是路由的懒加载
const Recommend = (resolve) => {
  import('../components/recommend/recommend').then((module) => {
    resolve(module)
  })
}
const Singer = (resolve) => {
  import('../components/singer/singer').then((module) => {
    resolve(module)
  })
}
const Rank = (resolve) => {
  import('../components/rank/rank').then((module) => {
    resolve(module)
  })
}
const Search = (resolve) => {
  import('../components/search/search').then((module) => {
    resolve(module)
  })
}
const SingerDetail = (resolve) => {
  import('../components/singer-detail/singer-detail').then((module) => {
    resolve(module)
  })
}
const Disc = (resolve) => {
  import('../components/disc/disc').then((module) => {
    resolve(module)
  })
}
const TopList = (resolve) => {
  import('../components/top-list/top-list').then((module) => {
    resolve(module)
  })
}
const UserCenter = (resolve) => {
  import('../components/user-center/user-center').then((module) => {
    resolve(module)
  })
}
// 4.路由配置
export default new Router({
  routes: [
    // 默认先展示的是recommend组件路由
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/recommend',
      component: Recommend,
      // 配置子路由
      children: [
        {
          path: ':id',
          component: Disc
        }
      ]
    },
    {
      path: '/singer',
      component: Singer,
      // 配置子路由
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    },
    {
      path: '/rank',
      component: Rank,
      // 配置子路由
      children: [
        {
          path: ':id',
          component: TopList
        }
      ]
    },
    {
      path: '/search',
      component: Search,
      // 配置子路由
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    },
    {
      path: '/user',
      component: UserCenter
    }
  ]
})
